/**
* @description: 印章使用工单 列表 （班组）
* @author: JiWei
* @date:
**/
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back title="印章使用工单" @goBack="goBack">
      <!-- <img slot="scan" src="../../../static/img/add.png" alt="" @click="add"> -->
      <img slot="screen" src="../../../static/img/sx.png" alt="" @click="screen">
    </nav-bar>

    <view class="header-bar">
      <ul class="menu">
        <li v-for="(item,index) in menuList" :key="index" @click="chooseMenu(item, index)">
          <view class="right-box">
            <text class="menu-num" :class="{selectmenu:index === current}">{{ item.count }}</text>
            <text class="menu-state" :class="{selectmenu:index === current}">{{ item.title }}</text>
          </view>
          <view :class="{sj:index === current}"></view>
        </li>
      </ul>
    </view>

    <view class="main-container">
      <!-- 搜索框  -->
      <view class="search">
        <van-search disabled show-action v-model="searchValue" left-icon="" action-text="重置" right-icon="search"
                    placeholder="请输入工单名称" @click="showSearch=true" @cancel="onSearch('')" />
      </view>
      <view class="task-list-container" v-if="taskList.length > 0">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
            <!-- 列表循环   -->
            <view class="task-list" v-for="(item,index) in taskList" :key="index" @click="jump(item)">
              <van-swipe-cell >
                <view class="task-title">
                  <view class="task-title-main">
                    <text class="task-title-main-text">{{ item.ORIGINATOR_NAME }}发起的印章审批</text>
                  </view>
                  <text class="task-status" :class="color(item.STATE)">
                    <text>{{item.STATENAME}}</text>
                  </text>
                </view>
                <hr class="task-hr">
                <view class="top-task-main">
                  <text class="task-big-ltitle">发起人:</text>
                  <text class="task-small-ltitle">{{ item.ORIGINATOR_NAME }}</text>
                  <text class="task-big-rtitle">组织机构:</text>
                  <text class="task-small-rtitle">{{ item.REMARK }}</text>
                </view>
				 <view class="top-task-main">
					 <text class="task-big-ltitle">发起时间:</text>
					 <text class="task-small-ltitle">{{ item.CREATETIME }}</text>
				 </view>
                <template #right v-if="item.STATENAME === '已撤销'">
                  <van-button class="delBtn" @click="handleDel(item)"  type="danger" text="删除" />
                </template>
              </van-swipe-cell>
            </view>
          </van-list>
        </van-pull-refresh>
      </view>
    </view>
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search-equ-match @cancel="showSearch = false;" @search="onSearch" />
    </van-popup>
    <!--筛选弹窗-->
    <screenPopup :showScreen="showScreen" @closePopup="showScreen=false"
                 @confirm="confirmCondition" :otherList="otherList" :typeList="typeList" @reset="reset">

    </screenPopup>
  </view>
</template>
<script>
import navBar from "../../../components/common/nav-bar";
import searchEquMatch from '../../common/searchEquMatch'
import screenPopup from "../common/screenPopup2.vue";
import plateTitle from "../common/plateTitle.vue";
import {mapGetters} from "vuex";
import moment from "moment/moment";
import {Dialog, Toast} from "vant";

export default {
  name: 'sealApprovalTeam',
  components: {
    navBar,
    searchEquMatch,
    screenPopup,
    plateTitle
  },
  props: {},
  data() {
    return {
      searchValue: "",
      showScreen: false,
      showSearch: false,
      taskList: [],
      color: (STATE) => {
        if (STATE === '0') {
          return 'left-state-dsp'
        } else if (STATE === '1') {
          return 'left-state-jj'
        } else if (STATE === '2') {
          return 'left-state-ywc'
        } else {
          return 'left-state-ycx'
        }
      },
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      total: 0, // 总条数
      page: 1,
      limit: 20,
      current: 0,
      typeList: [
        {
          TITLE: '本周',
          VALUE: 1,
        },
        {
          TITLE: '本月',
          VALUE: 2,
        },
        {
          TITLE: '上月',
          VALUE: 3,
        }
      ],
      otherList:[
        {
          TITLE:'按天',
        },
        {
          TITLE:'按月',
        }
      ],
      menuList: [],
      taskType: 1, // 右侧筛选发起类型
      startTime:'',
      endTime:'',
    };
  },
  computed: {
    ...mapGetters(['userData',"APPROVE_ID"])
  },
  watch: {},
  onLoad() {
    this.getSealListS()
  },
  methods: {
    // 获取列表
    getSealListS() {
		
      let auditStatus = this.current === 0 ? "" : String(this.current*1-1)
	  console.log(auditStatus)
      let params = {
        userId: this.userData.USERID,
        limit: this.limit,
        page: this.page,
        state: auditStatus,
        name: this.searchValue,
        timeType: this.taskType,
        startTime: this.startTime,
        endTime: this.endTime,
		modelType:"2"
      }
      this.$api.getSealList(params).then(res => {
		this.isLoading = false;
		this.refreshing = false;
        this.taskList = this.taskList.concat(res.data.resList.map(item => {
          return {
            CREATETIME:item.CREATE_TIME ? moment(item.CREATE_TIME).format('YYYY-MM-DD HH:mm') :null,
            ...item}
        }));
        this.menuList = [
          {
            count:res.data.count.total,
            title:"全部"
          },{
            count:res.data.count.pending,
            title:"待审批"
          },{
            count:res.data.count.pass,
            title:"审批通过"
          },{
            count:res.data.count.fail,
            title:"审批拒绝"
          }
        ]
        this.total = res.data.total_number
      })
    },
    handleDel(item) {
      let params = {
        ID:item.ID,
        userId: this.userData.USERID
      }
      Dialog.confirm({
        message: "是否确认删除？",
      }).then(() => {
        this.$api.deleteSealOne(params).then(res => {
          if(res.code == 0) {
            Toast.success({
              message:'删除成功'
            })
            this.onRefresh()
          }else {
            Toast('删除失败')
          }
        })
      })

    },
    goBack() {
      uni.navigateTo({
        url: '/pages/operationApprove/index/index'
      })
    },
    add() {
      uni.navigateTo({
        url: `/pages/operationApprove/sealApproval/initiateApplication`
      });
    },
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    loadMore() {
      if (this.total > this.taskList.length) {
        this.page = this.page + 1;
        this.getSealListS()
      } else {
        this.finished = true;
      }
    },
    chooseMenu(item,index) {
		  this.current = index
      this.onRefresh()
    },
    screen() {
      this.showScreen = true;
    },
    confirmCondition(selected,beginTime,endTime) {
      this.taskType = selected
      this.startTime = beginTime
      this.endTime = endTime
      this.onRefresh()
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.taskList = [];
      this.getSealListS()
    },
    reset() {
      this.taskType = 1;
      this.startTime = '';
      this.endTime = '';
      this.onRefresh()
    },
    //  列表跳转
    jump(item) {
      uni.navigateTo({
        url: `/pages/operationApprove/sealApproval/sealDetailsApproval?id=${item.ID}`
      });
    },

  }
};
</script>
<style scoped lang="scss">
.task-monitor-main {
  min-height: 100vh;
  background: #F2F6FA;

  .header {
    position: sticky;
    top: 0;

    img {
      width: px2vw(48);
      margin-right: px2vw(40);
    }

    .header-right {
      display: flex;

      /deep/ .van-icon {
        font-size: px2vw(52);
        font-weight: bold;
      }

      /deep/ .van-icon-scan {
        margin-right: px2vw(12);
      }

      /deep/ .van-icon-filter-o {
        margin-left: px2vw(12);
      }
    }
  }

  .header-bar {
    height: px2vh(120);
    border-radius: 0 0 px2vh(40) px2vh(40);
    background: #417ADC;
    margin-bottom: px2vh(130);

    .menu {
      width: px2vw(1020);
      height: px2vh(220);
      background-image: url('../../../static/img/borderR.png');
      background-size: px2vw(1020) px2vh(220);
      //margin-left: px2vw(30);
      margin: 0 auto;
      display: flex;
      justify-content: space-evenly;

      li {
        //width: calc(1 * (100% - #{px2vw(400)}) / 4);
        height: 100%;
        //margin-left: px2vw(80);
        //float: left;
        position: relative;

        .right-box {
          height: px2vh(112);
          //margin-left:px2vw(10);
          float: left;
          margin-top: px2vh(59);
          text-align: center;

          .menu-num {
            display: block;
            font-size: px2vw(54);
            font-weight: bold;
            color: #333;
          }

          .menu-state {
            font-size: px2vw(36);
            color: #333;
          }

          .selectmenu {
            color: #417ADC;
          }
        }

        .sj {
          width: px2vw(78);
          height: px2vh(66);
          position: absolute;
          bottom: px2vh(-34);
          //right: px2vw(40);
          left: 50%;
          transform: translateX(-50%);
          background-image: url('../../../static/img/sj.png');
          background-size: px2vw(78) px2vh(66);
        }
      }
    }
  }

  .task-info-container,
  .task-assignment-item {
    border-radius: $border-radius-base;
    overflow: hidden;
    background-color: #ffffff;
  }

  .main-container {
    height: calc(100vh - #{px2vh(413)});

    .search {
      width: px2vw(1020);
      height: 38px;
      margin: px2vw(30) px2vh(30);
      border-radius: px2vw(20);
      overflow: hidden;

      .van-search {
        padding: 0 0;
        height: 38px;
      }

      .van-search__content {
        background: #fff;
        height: 38px;
      }

      /deep/ .van-field__control {
        height: 30px;
      }
    }

    .screen-type-item {
      margin-bottom: px2vh(30);

      .plate-title {
        margin-bottom: px2vh(36);
      }

      .screen-option-container {
        display: flex;
        //justify-content: space-between;
        flex-wrap: wrap;

        .screen-option-item {
          width: px2vw(260);
          height: px2vh(90);
          margin-bottom: px2vh(20);
          line-height: px2vh(90);
          background: #f7f7f7;
          color: #666;
          font-size: px2vh(36);
          text-align: center;
          border-radius: $border-radius-base;
        }

        .screen-option-item:not(:nth-child(3n)) {
          margin-right: px2vw(20);
        }

        .screen-option-item.active {
          background: #ecf1fb;
          color: #417ADC;
        }
      }
    }

    .task-list-container {
      height: calc(100vh - #{px2vh(443)} - 38px);
      overflow: auto;
      .task-list {
        width: px2vw(1020);
        background: #fff;
        border-radius: px2vw(20) px2vh(20);
        margin: 0 px2vw(30) px2vh(30) px2vw(30);

        .task-title {
          width: px2vw(940);
          height: px2vh(80);
          margin-left: px2vw(40);
          padding-top: px2vw(30);
          margin-bottom: px2vh(30);
          display: flex;
          align-items: center;
          justify-content: space-between;

          .task-title-main {
            display: flex;
            align-items: center;

            img {
              width: px2vw(64);
              height: px2vw(64);
            }
          }

          .task-title-main-text {
            width: px2vw(700);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-left: px2vw(20);
            font-size: px2vh(48);
          }

          .task-status {
            width: px2vw(200);
            height: px2vh(50);
			      line-height: px2vh(50);
            border-radius: px2vw(10);
            font-size: px2vw(32);
            text-align: center;
          }

          .left-state-ywc {
            color: #3CDA68;
            background: rgba(60, 218, 104, .1);
          }

          .left-state-dsp {
            color: #FFAD0E;
            background: rgba(255, 173, 14, .1);
          }

          .left-state-jj {
            color: #FF7070;
            background: rgba(255, 112, 112, .1);
          }

          .left-state-dzx {
            color: #417ADC;
            background: rgba(65, 122, 220, .1);
          }

          .left-state-ycx {
            color: #8C8C8C;
            background: rgba(140, 140, 140, .1);
          }
        }

        .task-hr {
          width: px2vw(940);
          border: px2vh(1) solid #e5e5e5;
          margin-left: px2vw(40);
          margin-bottom: px2vh(30);
        }
        .delBtn {
          height: 100%;
          background: #FF4355;
          border-radius: px2vw(0) px2vw(20) px2vw(20) px2vw(0);
        }
        .top-task-main {
          width: px2vw(900);
          font-size: px2vh(36);
          line-height: px2vh(62);
          margin-left: px2vw(60);
          padding-bottom: px2vw(30);
          .task-big-ltitle,
          .task-big-rtitle {
            color: #666;
          }

          .task-small-ltitle,
          .task-small-rtitle {
            margin-left: px2vw(25);
            color: #333;
          }

          .task-big-rtitle {
            margin-left: px2vw(40);
          }
        }
      }
    }
  }
}

</style>
